<template>
	<view class="service-picker">
		<view class="picker-overlay" @click="$emit('cancel')"></view>
		<view class="picker-content">
			<view class="picker-title">选择基础服务</view>

			<!-- 使用复选框来模拟多选 -->
			<view class="picker-option" v-for="(item, index) in options" :key="item.id">
				<checkbox @click="toggleSelection(item.id)" :value="item.id" :label="item.name">{{item.name}}</checkbox>
			</view>

			<view class="picker-buttons">
				<button @click="confirm">确定</button>
				<button @click="$emit('cancel')">取消</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			options: {
				type: Array,
				required: true
			},
		},
		data() {
			return {
				selectedItems: []
			};
		},
		methods: {
			// 切换选中状态
			toggleSelection(id) {
				if (this.selectedItems.includes(id)) {
					this.selectedItems = this.selectedItems.filter(itemId => itemId !== id);
				} else {
					this.selectedItems.push(id);
				}
			},
			// 确认选择
			confirm() {
				this.$emit('confirm', [...this.selectedItems]); // 返回选中的服务ID数组
			},
		},
	};
</script>

<style scoped>
	.service-picker {
		position: fixed;
		top: 0%;
		left: 0%;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.7);
		display: flex;
		align-items: flex-end;
	}

	.picker-overlay {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
	}

	.picker-content {
		background: #fff;
		width: 100%;
		padding: 20px;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
	}

	.picker-title {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 10px;
	}

	.picker-options {
		max-height: 300px;
		overflow-y: auto;
	}

	.picker-option {
		padding: 10px 0;
		border-bottom: 1px solid #f0f0f0;
		font-size: 16px;
	}

	.picker-buttons {
		display: flex;
		justify-content: space-between;
		margin-top: 10px;
	}

	.picker-buttons button {
		flex: 1;
		margin: 0 5px;
		padding: 10px 0;
		background: #65c61d;
		color: #fff;
		border: none;
		border-radius: 5px;
		font-size: 16px;
		cursor: pointer;
	}

	.picker-buttons button:hover {
		background: #4aa015;
	}

	/* 增加选择框的样式 */
	select {
		width: 100%;
		padding: 8px;
		border: 1px solid #ccc;
		border-radius: 4px;
		font-size: 16px;
	}

	option {
		font-size: 16px;
	}
</style>